<template>
	<view
	class="nav-bar"
	:style="{ 'margin': statusBarAndTitleMaginTop + 'px' }"
	@click.stop="handleBack"
	>
		<uni-icons class="back-icon" type="back" size="20" color="white"></uni-icons>
	</view>
</template>

<script setup>
	import {
		getStatusBarAndTitleMaginTop
	} from '@/utils/system.js'
	const statusBarAndTitleMaginTop = getStatusBarAndTitleMaginTop()
	
	function handleBack(){
		uni.navigateBack()
	}

</script>

<style lang="scss" scoped>
	
	.nav-bar{
		height: 70rpx;
		width: 70rpx;
		z-index: 20;
		display: grid;
		place-items: center;
		border-radius: 50%;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		
		background-color: rgba(0, 0, 0, 0.5);
	}

</style>